<template>
  <f7-page subnavbar>
    <f7-navbar :title="$t('m.tabs.marketQuotation')" back-link=" ">
      <f7-subnavbar class="quotes-subnav ios-translucent">
        <f7-row>
          <f7-col width="35">{{$t('m.q1')}}</f7-col>
          <f7-col width="40">{{$t('m.q2')}}</f7-col>
          <f7-col width="25">{{$t('m.q3')}}</f7-col>
        </f7-row>
      </f7-subnavbar>
    </f7-navbar>

    <div class="content-padding">
      <ul>
        <li v-for="(item, index) in quotesList" :key="index" :class="parseFloat(item.size) > 0?'zhang':'die'">
          <f7-row>
            <f7-col width="35"><h4>{{item.buy_name}}</h4></f7-col>
            <f7-col width="40">
              <h3>￥{{item.rmb}}</h3>
              <p>${{item.price}}</p>
            </f7-col>
            <f7-col width="25">
              <span>{{item.size > 0 ? '+' : ''}}{{parseFloat(item.size) * 100}}%</span>
            </f7-col>
          </f7-row>
        </li>
      </ul>
    </div>

  </f7-page>
</template>

<script>
  import { getQuotes } from "../api/find";

  export default {
    name: "quotes",
    data() {
      return {
        quotesList: []
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        getQuotes().then(res=> {
          this.quotesList = res.data;
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .quotes-subnav {
    /deep/ {
      .subnavbar-inner {
        padding: 0 60px;
      }
      .row {
        width: 100%!important;
      }
    }
  }
  .content-padding {
    padding-top: $padding20;
    ul {
      li {
        background: #fff;
        padding: $padding;
        margin-bottom: $padding20;
        .row > div {
          align-self: center;
          &:first-child {
            /*font-weight: 500;*/
            font-size: 35px;
            color: $colorBlack!important;
          }
          &:nth-child(2) {
            h3 {
              color: $dieColor;
            }
            p {
              font-size: 20px;
              color: $color8b;
            }
          }
          &:last-child {
            span {
              display: block;
              background: $dieColor;
              color: #fff;
              padding: 10px $padding20;
              border-radius: $radius;
              width: 80px;
              text-align: center;
            }
          }
        }
        &.zhang {
          .row > div {
            &:nth-child(2) {
              h3 {
                color: $zhangColor;
              }
            }
            &:last-child {
              span {
                background: $zhangColor;
                display: inline-block;
              }
            }
          }
        }
      }
    }
  }
</style>
